
<template>
  <!--1. 容器 -->
  <div ref="right1_container" id="container" style="height: 95%"></div>
</template>

<script>
import {Line} from '@antv/g2plot';
import {get} from '../../../utils/request'
import moment from "moment"
import { Area } from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[]
     }
  },
  created(){

  },
mounted(){
this.initData()
},
methods:{
  initData(){
    get('/dashboard/pageQueryTodayData',{
      page:1,
      pageSize:5,
      device_id:1
    }).then(res=>{
      res.data.list.forEach(item=>{
      item.dataTime = moment(item.insert_time).format('HH:mm:ss') 
      });
      this.dataArr = res.data.list
      this.initChart()
    })
    
  },
initChart(){
  const area = new Area(this.$refs.right1_container,{
    data:this.dataArr,
    xField: 'dataTime',
      yField: 'temperature',
      xAxis: {
        range: [0, 1],
        tickCount: 5,
      },
      areaStyle: () => {
        return {
          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        };
      },
    });
    area.render();
  //   xField:'dataTime',
  //   yField:'temperature',
  // });

  // line.render();
}
}
}
</script>

<style scoped>

</style>